<template>
	<view class="container">
		<!-- 当前版本信息 -->
		<view class="current-version-card">
			<view class="version-info">
				<text class="label">当前版本</text>
				<text class="version">v{{ currentVersion }}</text>
			</view>
			<view class="version-status" v-if="hasNewVersion">
				<uni-icons type="info" size="16" color="#ff6b6b"></uni-icons>
				<text class="status-text">发现新版本</text>
			</view>
			<view class="version-status" v-else>
				<uni-icons type="checkmarkempty" size="16" color="#67c23a"></uni-icons>
				<text class="status-text">已是最新版本</text>
			</view>
		</view>
		
		<!-- 新版本提示 -->
		<view class="update-tip" v-if="hasNewVersion">
			<view class="tip-header">
				<view class="tip-title">
					<uni-icons type="info" size="20" color="#409eff"></uni-icons>
					<text>发现新版本 v{{ latestVersion }}</text>
				</view>
				<view class="download-btn" @tap="handleDownload">
					<text>立即更新</text>
					<uni-icons type="download" size="14" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="tip-content">
				<text class="tip-text">建议您更新到最新版本以获得更好的体验</text>
			</view>
		</view>
		
		<!-- 版本历史标题 -->
		<view class="section-title">
			<text>版本历史</text>
		</view>
		
		<!-- 版本列表 -->
		<scroll-view class="version-list" scroll-y>
			<view 
				class="version-item" 
				v-for="version in versionList" 
				:key="version.id"
				:style="{ animationDelay: version.index * 0.1 + 's' }"
			>
				<view 
					class="version-header"
					@tap="toggleVersion(version.id)"
				>
					<view class="version-info">
						<text class="version-name">v{{ version.version }}</text>
						<text class="version-time">{{ formatTime(version.create_time) }}</text>
					</view>
					<uni-icons 
						:type="expandedVersions.includes(version.id) ? 'bottom' : 'right'" 
						size="14" 
						color="#999"
						:class="{ rotate: expandedVersions.includes(version.id) }"
					></uni-icons>
				</view>
				
				<!-- 更新内容 -->
				<view 
					class="version-content"
					v-show="expandedVersions.includes(version.id)"
				>
					<view 
						class="update-item"
						v-for="(update, index) in version.update_data"
						:key="update.id"
						:style="{ animationDelay: index * 0.05 + 's' }"
					>
						<text 
							class="update-type"
							:class="{
								'type-new': update.update_type === '新增',
								'type-optimize': update.update_type === '优化',
								'type-fix': update.update_type === '修复',
								'type-modify': update.update_type === '修改',
								'type-delete': update.update_type === '删除'
							}"
						>{{ update.update_type }}</text>
						<text class="update-content">{{ update.update_content }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 下载更新弹窗 -->
		<view class="download-popup" v-if="showDownloadPopup">
			<view class="mask"></view>
			<view class="popup-content">
				<view class="popup-header">
					<text class="title">下载更新</text>
				</view>
				<view class="popup-body">
					<view class="progress-box">
						<view class="progress-info">
							<text class="progress-text">{{ downloadStatus }}</text>
							<text class="progress-percent">{{ downloadProgress }}%</text>
						</view>
						<view class="progress-bar">
							<view 
								class="progress-inner"
								:style="{ width: downloadProgress + '%' }"
							></view>
						</view>
					</view>
					
					<!-- 下载提示 -->
					<view class="download-tips" v-if="downloadProgress < 100">
						<view class="tip-item">
							<uni-icons type="info" size="14" color="#ff6b6b"></uni-icons>
							<text>下载过程中请勿关闭应用或退出本页面</text>
						</view>
						<view class="tip-item">
							<uni-icons type="info" size="14" color="#ff6b6b"></uni-icons>
							<text>请确保网络连接稳定</text>
						</view>
					</view>
					
					<!-- 下载完成提示 -->
					<view class="download-complete" v-else>
						<uni-icons type="checkmarkempty" size="40" color="#67c23a"></uni-icons>
						<text>下载完成，准备安装</text>
					</view>
					
					<view class="popup-footer">
						<text 
							class="cancel-btn" 
							@tap="cancelDownload"
							v-if="downloadProgress < 100"
						>取消更新</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 自定义信息框 -->
		<view class="message-box" v-if="messageVisible">
			<view class="mask" @tap="handleMessageCancel"></view>
			<view class="message-content">
				<view class="message-title">{{ messageConfig.title }}</view>
				<view class="message-text">{{ messageConfig.content }}</view>
				<view class="message-buttons">
					<text 
						v-if="messageConfig.showCancel" 
						class="cancel-btn" 
						@tap="handleMessageCancel"
					>{{ messageConfig.cancelText }}</text>
					<text 
						class="confirm-btn" 
						@tap="handleMessageConfirm"
					>{{ messageConfig.confirmText }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { api } from '@/utils/request'
import Storages from '@/utils/storages'

// 版本列表
const versionList = ref([])
// 展开的版本ID列表
const expandedVersions = ref([])
// 当前版本
const currentVersion = ref(Storages.UserInfo.version)
// 最新版本
const latestVersion = ref('')
// 是否有新版本
const hasNewVersion = ref(false)

// 下载相关状态
const showDownloadPopup = ref(false)
const downloadProgress = ref(0)
const downloadStatus = ref('准备下载...')

// 当前下载任务
let currentDownloadTask = null

// 添加信息框状态
const messageVisible = ref(false)
const messageConfig = ref({
	title: '',
	content: '',
	showCancel: true,
	confirmText: '确定',
	cancelText: '取消',
	success: null
})

// 新增网络状态相关
const networkType = ref('') 
const isNetworkAvailable = ref(true)

// 添加下载状态控制
const downloadState = ref({
	lastProgress: 0,
	stuckTime: 0,
	retryCount: 0,
	maxRetries: 3,
	timeout: null
})

// 比较版本号
const compareVersion = (v1, v2) => {
	const v1Parts = v1.split('.').map(Number)
	const v2Parts = v2.split('.').map(Number)
	
	for(let i = 0; i < 3; i++) {
		if(v1Parts[i] > v2Parts[i]) return 1
		if(v1Parts[i] < v2Parts[i]) return -1
	}
	return 0
}

// 检查是否有新版本
const checkNewVersion = (versions) => {
	if(!versions.length) return
	
	// 获取最新版本
	const latest = versions[0]
	latestVersion.value = latest.version
	
	// 比较版本
	hasNewVersion.value = compareVersion(latest.version, currentVersion.value) > 0
}

// 获取版本列表
const getVersionList = async () => {
	try {
		const res = await api.request({
			url: '/api/system/get_system_version/',
			method: 'GET'
		})
		
		if(res.code === 200) {
			// 添加索引用于动画延迟
			versionList.value = res.data.map((item, index) => ({
				...item,
				index
			}))
			// 检查新版本
			checkNewVersion(res.data)
			// 默认展开最新版本
			if(res.data.length > 0) {
				expandedVersions.value = [res.data[0].id]
			}
		}
	} catch(err) {
		console.error('获取版本列表失败', err)
		uni.showToast({
			title: '获取版本列表失败',
			icon: 'none'
		})
	}
}

// 切换版本展开状态
const toggleVersion = (versionId) => {
	const index = expandedVersions.value.indexOf(versionId)
	if(index > -1) {
		expandedVersions.value.splice(index, 1)
	} else {
		expandedVersions.value.push(versionId)
	}
}

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

// 格式化时间
const formatTime = (timeStr) => {
	if(!timeStr) return ''
	const date = new Date(timeStr.replace(/-/g, '/'))
	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
}

// 监听页面返回
onBeforeUnmount(() => {
	// 如果正在下载，阻止返回
	if(currentDownloadTask && downloadProgress.value < 100) {
		showMessage({
			title: '提示',
			content: '正在下载更新，请勿退出本页面',
			showCancel: false
		})
	}
	// 移除网络状态监听
	uni.offNetworkStatusChange()
})

// 修改 showMessage 方法
const showMessage = (options) => {
	messageConfig.value = {
		...messageConfig.value,
		...options
	}
	messageVisible.value = true
}

// 处理确认按钮点击
const handleMessageConfirm = () => {
	messageVisible.value = false
	if(messageConfig.value.success) {
		messageConfig.value.success({ confirm: true })
	}
}

// 处理取消按钮点击
const handleMessageCancel = () => {
	messageVisible.value = false
	if(messageConfig.value.success) {
		messageConfig.value.success({ confirm: false })
	}
}

// 监听网络状态变化
const listenNetworkStatus = () => {
	uni.onNetworkStatusChange((res) => {
		networkType.value = res.networkType
		isNetworkAvailable.value = res.isConnected
		
		// 如果正在下载且断网
		if(!res.isConnected && currentDownloadTask && downloadProgress.value < 100) {
			showMessage({
				title: '网络异常',
				content: '当前网络不可用,下载已暂停。请检查网络设置后重试。',
				showCancel: false,
				success: () => {
					// 中断下载
					cancelDownload()
				}
			})
		}
	})
}

// 检查网络状态
const checkNetworkStatus = () => {
	return new Promise((resolve) => {
		uni.getNetworkType({
			success: (res) => {
				networkType.value = res.networkType
				isNetworkAvailable.value = res.networkType !== 'none'
				resolve(isNetworkAvailable.value)
			},
			fail: () => {
				isNetworkAvailable.value = false
				resolve(false)
			}
		})
	})
}

// 修改下载函数
const startDownload = (downloadUrl) => {
	showDownloadPopup.value = true
	downloadProgress.value = 0
	downloadStatus.value = '准备下载...'
	
	// 重置下载状态
	downloadState.value = {
		lastProgress: 0,
		stuckTime: 0,
		retryCount: 0,
		maxRetries: 3,
		timeout: null
	}
	
	// 开始下载
	startDownloadTask(downloadUrl)
}

// 抽取下载任务为独立函数
const startDownloadTask = (downloadUrl) => {
	// 清除之前的超时检测
	if(downloadState.value.timeout) {
		clearTimeout(downloadState.value.timeout)
	}
	
	// 设置超时检测
	downloadState.value.timeout = setTimeout(() => {
		checkDownloadProgress()
	}, 5000) // 每5秒检查一次进度

	currentDownloadTask = uni.downloadFile({
		url: downloadUrl,
		success: async (res) => {
			if(res.statusCode === 200) {
				// 清除超时检测
				clearTimeout(downloadState.value.timeout)
				
				downloadProgress.value = 100
				downloadStatus.value = '下载完成'
				
				// 先关闭下载弹窗
				showDownloadPopup.value = false
				
				// 保存临时文件路径
				const tempFilePath = res.tempFilePath
				
				// 延迟一下再显示安装确认,避免界面闪动
				setTimeout(() => {
					showMessage({
						title: '安装确认',
						content: '新版本已下载完成，是否立即安装？\n安装完成后需要重启应用。',
						confirmText: '立即安装',
						cancelText: '稍后安装',
						success: (result) => {
							console.log('安装确认结果:', result) // 添加调试日志
							if(result.confirm) {
								console.log('开始安装:', tempFilePath) // 添加调试日志
								installUpdate(tempFilePath)
							} else {
								showMessage({
									title: '温馨提示',
									content: '您可以稍后在"设置-版本更新"中安装新版本',
									showCancel: false
								})
							}
						}
					})
				}, 300)
			}
		},
		fail: (err) => {
			console.error('下载失败:', err)
			handleDownloadError(downloadUrl)
		}
	})

	// 监听下载进度
	currentDownloadTask.onProgressUpdate((res) => {
		downloadProgress.value = Math.min(Math.max(res.progress || 0, 0), 100)
		
		if(downloadProgress.value < 100) {
			const downloaded = (res.totalBytesWritten / 1024 / 1024).toFixed(2)
			const total = (res.totalBytesExpectedToWrite / 1024 / 1024).toFixed(2)
			downloadStatus.value = `正在下载更新...${downloaded}MB/${total}MB`
			
			// 更新最后进度
			downloadState.value.lastProgress = downloadProgress.value
			// 重置卡住时间
			downloadState.value.stuckTime = 0
		}
	})
}

// 检查下载进度
const checkDownloadProgress = () => {
	// 如果已经完成或取消，不再检查
	if(!currentDownloadTask || downloadProgress.value >= 100) {
		return
	}
	
	// 如果进度没有变化
	if(downloadProgress.value === downloadState.value.lastProgress) {
		downloadState.value.stuckTime += 5
		
		// 如果卡住超过15秒
		if(downloadState.value.stuckTime >= 15) {
			handleDownloadStuck()
			return
		}
	} else {
		// 进度有变化，重置卡住时间
		downloadState.value.stuckTime = 0
	}
	
	// 更新最后进度
	downloadState.value.lastProgress = downloadProgress.value
	
	// 继续检查
	downloadState.value.timeout = setTimeout(() => {
		checkDownloadProgress()
	}, 5000)
}

// 处理下载卡住
const handleDownloadStuck = () => {
	// 如果还可以重试
	if(downloadState.value.retryCount < downloadState.value.maxRetries) {
		downloadState.value.retryCount++
		
		showMessage({
			title: '下载异常',
			content: `下载似乎卡住了，正在进行第${downloadState.value.retryCount}次重试...`,
			showCancel: false
		})
		
		// 取消当前下载
		currentDownloadTask.abort()
		
		// 延迟1秒后重试
		setTimeout(() => {
			startDownloadTask(currentDownloadTask.url)
		}, 1000)
	} else {
		// 超过重试次数
		handleDownloadError()
	}
}

// 处理下载错误
const handleDownloadError = (downloadUrl) => {
	// 清除超时检测
	if(downloadState.value.timeout) {
		clearTimeout(downloadState.value.timeout)
	}
	
	// 如果还可以重试
	if(downloadState.value.retryCount < downloadState.value.maxRetries) {
		downloadState.value.retryCount++
		
		showMessage({
			title: '下载失败',
			content: `下载失败，正在进行第${downloadState.value.retryCount}次重试...`,
			showCancel: false
		})
		
		// 延迟1秒后重试
		setTimeout(() => {
			startDownloadTask(downloadUrl)
		}, 1000)
	} else {
		// 超过重试次数，显示错误
		showDownloadPopup.value = false
		setTimeout(() => {
			showMessage({
				title: '下载失败',
				content: '多次尝试下载失败，请检查网络后重试。',
				showCancel: false
			})
		}, 300)
	}
}

// 修改取消下载函数
const cancelDownload = () => {
	if(currentDownloadTask) {
		currentDownloadTask.abort()
		currentDownloadTask = null
	}
	
	// 清除超时检测
	if(downloadState.value.timeout) {
		clearTimeout(downloadState.value.timeout)
	}
	
	downloadProgress.value = 0
	downloadStatus.value = '准备下载...'
	showDownloadPopup.value = false
	
	uni.showToast({
		title: '已取消更新',
		icon: 'none'
	})
}

// 安装更新包
const installUpdate = (filePath) => {
	console.log('执行安装:', filePath) // 添加调试日志
	// 显示安装进度弹窗
	showDownloadPopup.value = true
	downloadStatus.value = '正在安装...'
	
	plus.runtime.install(
		filePath,
		{
			force: false
		},
		() => {
			console.log('安装成功') // 添加调试日志
			downloadStatus.value = '安装完成'
			showDownloadPopup.value = false
			
			setTimeout(() => {
				showMessage({
					title: '安装成功',
					content: '新版本已安装完成，需要重启应用才能生效。\n是否立即重启？',
					confirmText: '立即重启',
					cancelText: '稍后重启',
					success: (result) => {
						console.log('重启确认结果:', result) // 添加调试日志
						if(result.confirm) {
							console.log('执行重启') // 添加调试日志
							plus.runtime.restart()
						} else {
							showMessage({
								title: '温馨提示', 
								content: '请注意：新版本将在下次启动应用时生效',
								showCancel: false
							})
						}
					}
				})
			}, 300)
		},
		(err) => {
			console.error('安装失败:', err) // 添加详细错误日志
			showDownloadPopup.value = false
			
			setTimeout(() => {
				showMessage({
					title: '安装失败',
					content: '安装过程中出现错误，请重试。\n如果问题持续存在，请尝试重新下载。',
					showCancel: false
				})
			}, 300)
		}
	)
}

// 添加处理更新按钮点击的方法
const handleDownload = async () => {
	const latestVersionInfo = versionList.value[0]
	if(!latestVersionInfo?.download_url) {
		uni.showToast({
			title: '暂无下载链接',
			icon: 'none'
		})
		return
	}

	// 检查网络状态
	const networkAvailable = await checkNetworkStatus()
	if(!networkAvailable) {
		showMessage({
			title: '网络异常',
			content: '当前网络不可用,请检查网络设置后重试。',
			showCancel: false
		})
		return
	}
	
	// 如果是移动网络,提示用户
	if(networkType.value === 'mobile') {
		showMessage({
			title: '流量提醒',
			content: '当前正在使用移动网络,继续下载可能产生流量费用,是否继续?',
			success: (res) => {
				if(res.confirm) {
					startDownload(latestVersionInfo.download_url)
				}
			}
		})
		return
	}

	startDownload(latestVersionInfo.download_url)
}

onMounted(() => {
	getVersionList()
	listenNetworkStatus() // 开始监听网络状态
})
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 30rpx;
}

// 当前版本卡片样式
.current-version-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	animation: slideIn 0.3s ease-out;
	
	.version-info {
		.label {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 8rpx;
			display: block;
		}
		
		.version {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.version-status {
		display: flex;
		align-items: center;
		gap: 6rpx;
		
		.status-text {
			font-size: 24rpx;
			&:not(.outdated) {
				color: #67c23a;
			}
		}
		
		&.outdated {
			.status-text {
				color: #ff6b6b;
			}
		}
	}
}

// 新版本提示样式
.update-tip {
	background: linear-gradient(135deg, #409eff0d 0%, #409eff1a 100%);
	border: 2rpx solid #409eff33;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	animation: slideIn 0.3s ease-out;
	
	.tip-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
		
		.tip-title {
			display: flex;
			align-items: center;
			gap: 10rpx;
			
			text {
				font-size: 28rpx;
				color: #409eff;
				font-weight: bold;
			}
		}
		
		.download-btn {
			display: flex;
			align-items: center;
			gap: 6rpx;
			background: #409eff;
			padding: 12rpx 24rpx;
			border-radius: 30rpx;
			
			text {
				font-size: 24rpx;
				color: #fff;
			}
			
			&:active {
				opacity: 0.8;
			}
		}
	}
	
	.tip-content {
		.tip-text {
			font-size: 24rpx;
			color: #666;
			line-height: 1.5;
		}
	}
}

// 版本历史标题
.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 20rpx;
	padding: 0 10rpx;
}

// 版本列表
.version-list {
	.version-item {
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		animation: slideIn 0.3s ease-out both;
		
		.version-header {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: all 0.3s;
			
			&:active {
				background: #f8f8f8;
			}
			
			.version-info {
				.version-name {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					margin-right: 20rpx;
				}
				
				.version-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.rotate {
				transform: rotate(180deg);
				transition: transform 0.3s;
			}
		}
		
		.version-content {
			padding: 0 30rpx 30rpx;
			
			.update-item {
				display: flex;
				align-items: flex-start;
				margin-bottom: 20rpx;
				animation: fadeIn 0.3s ease-out both;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.update-type {
					padding: 4rpx 12rpx;
					border-radius: 4rpx;
					font-size: 24rpx;
					margin-right: 16rpx;
					transition: all 0.3s;
					
					&.type-new {
						color: #67c23a;
						background: rgba(103, 194, 58, 0.1);
						
						&:active {
							background: rgba(103, 194, 58, 0.2);
						}
					}
					
					&.type-optimize {
						color: #409eff;
						background: rgba(64, 158, 255, 0.1);
						
						&:active {
							background: rgba(64, 158, 255, 0.2);
						}
					}
					
					&.type-fix {
						color: #f56c6c;
						background: rgba(245, 108, 108, 0.1);
						
						&:active {
							background: rgba(245, 108, 108, 0.2);
						}
					}
					
					&.type-modify {
						color: #e6a23c;
						background: rgba(230, 162, 60, 0.1);
						
						&:active {
							background: rgba(230, 162, 60, 0.2);
						}
					}
					
					&.type-delete {
						color: #909399;
						background: rgba(144, 147, 153, 0.1);
						
						&:active {
							background: rgba(144, 147, 153, 0.2);
						}
					}
				}
				
				.update-content {
					flex: 1;
					font-size: 26rpx;
					color: #666;
					line-height: 1.6;
				}
			}
		}
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateX(-20rpx);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

// 下载弹窗样式
.download-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 998;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
	}
	
	.popup-content {
		position: relative;
		width: 560rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		animation: slideIn 0.3s ease-out;
		
		.popup-header {
			padding: 30rpx;
			text-align: center;
			border-bottom: 1rpx solid #eee;
			
			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
		
		.popup-body {
			padding: 40rpx;
			
			.progress-box {
				.progress-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.progress-text {
						font-size: 28rpx;
						color: #666;
					}
					
					.progress-percent {
						font-size: 28rpx;
						color: #409eff;
						font-weight: bold;
					}
				}
				
				.progress-bar {
					height: 12rpx;
					background: #f5f5f5;
					border-radius: 6rpx;
					overflow: hidden;
					
					.progress-inner {
						height: 100%;
						background: #409eff;
						border-radius: 6rpx;
						transition: width 0.2s linear;
					}
				}
			}
			
			// 下载提示样式
			.download-tips {
				margin-top: 30rpx;
				padding: 20rpx;
				background: #fff7ed;
				border-radius: 12rpx;
				
				.tip-item {
					display: flex;
					align-items: center;
					gap: 8rpx;
					margin-bottom: 12rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					text {
						font-size: 24rpx;
						color: #ff6b6b;
					}
				}
			}
			
			// 下载完成提示样式
			.download-complete {
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 16rpx;
				animation: bounceIn 0.5s ease-out;
				
				text {
					font-size: 28rpx;
					color: #67c23a;
					font-weight: bold;
				}
			}
			
			.popup-footer {
				margin-top: 30rpx;
				text-align: center;
				
				.cancel-btn {
					display: inline-block;
					padding: 16rpx 40rpx;
					font-size: 28rpx;
					color: #666;
					background: #f5f5f5;
					border-radius: 30rpx;
					
					&:active {
						opacity: 0.7;
					}
				}
			}
		}
	}
}

// 弹跳动画
@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 0.9;
		transform: scale(1.1);
	}
	80% {
		opacity: 1;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

// 自定义信息框样式
.message-box {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(4px);
	}
	
	.message-content {
		position: relative;
		width: 560rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		animation: slideIn 0.2s ease-out;
		
		.message-title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			text-align: center;
			padding: 30rpx;
		}
		
		.message-text {
			font-size: 28rpx;
			color: #666;
			padding: 0 40rpx 40rpx;
			text-align: center;
			white-space: pre-wrap;
		}
		
		.message-buttons {
			display: flex;
			border-top: 1rpx solid #eee;
			
			text {
				flex: 1;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				
				&.cancel-btn {
					color: #999;
					border-right: 1rpx solid #eee;
				}
				
				&.confirm-btn {
					color: #409eff;
				}
				
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
}

@keyframes slideIn {
	from {
		transform: translateY(30rpx);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>
